import React, { useCallback } from 'react';
import { Avatar, ButtonBase, Typography } from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles(theme => ({
  root: {
    cursor: 'pointer',
    position: 'relative',
    zIndex: 10,
    '&:hover': {
      '& $mask': {
        left: 0,
        top: 0,
        boxShadow: '0 0 10px rgba(10,10,10, 0.1)',
      },

      '& $avatar': {
        transform: 'rotate(360deg) scale(2)',
      },

      '& $infoBox': {
        paddingLeft: theme.spacing(5),
      },
    },
  },
  contentBox: {
    display: 'flex',
    flexDirection: 'row',
    overflow: 'hidden',
    padding: theme.spacing(1),
    borderRadius: theme.spacing(0.5),
    pointerEvents: 'none',
  },
  avatar: {
    height: '64px',
    width: '64px',
    zIndex: 10,
    transition: `transform 0.5s ease-in-out`,
  },
  infoBox: {
    display: 'flex',
    flexDirection: 'column',
    overflow: 'hidden',
    paddingLeft: theme.spacing(1),
    zIndex: 10,
    transition: `padding 0.3s ease-in-out`,
  },
  name: {
    // lineHeight: '40px',
    // height: '40px',
  },
  sign: {
    // lineHeight: '40px',
    // height: '40px',
  },
  mask: {
    border: '1px solid #e2e8f0',
    overflow: 'hidden',
    borderRadius: theme.spacing(0.5),
    backgroundColor: '#f7f9fa',
    position: 'absolute',
    bottom: 0,
    right: 0,
    left: '40px',
    top: '40px',
    zIndex: 5,
    transition: `all 0.3s ease-in-out`,
  },
}));

interface IProps {
  avatar?: string;
  name?: string;
  sign?: string;
  link?: string;
}

const FriendItem: React.FC<IProps> = props => {
  const classes = useStyles();

  const handleClick = useCallback(() => {
    if (props.link) {
      window.open(props.link);
    }
  }, []);

  return (
    <div className={classes.root} onClick={handleClick}>
      <div className={classes.contentBox}>
        <Avatar className={classes.avatar} src={props.avatar} />
        <div className={classes.infoBox}>
          <Typography
            gutterBottom
            className={classes.name}
            noWrap
            variant="h5"
            component="h2"
          >
            {props.name}
          </Typography>
          <Typography
            className={classes.sign}
            noWrap
            variant="body2"
            color="textSecondary"
            component="p"
          >
            {props.sign}
          </Typography>
        </div>
      </div>
      <div className={classes.mask}>
        <ButtonBase
          style={{
            position: 'absolute',
            left: 0,
            right: 0,
            top: 0,
            bottom: 0,
            width: '100%',
            height: '100%',
            zIndex: 99,
          }}
          onClick={handleClick}
        >
          <div></div>
        </ButtonBase>
      </div>
    </div>
  );
};

export default FriendItem;
